<!DOCTYPE html>
<html>
<head>
    <title>Custom tools</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example" class="k-content">
    <div class="configuration k-widget k-header" style="float:none;max-width:none;margin:0 0 2em;">
        <span class="infoHead">Information</span>
        <p>
            The following demo shows how to customize some of the native Editor tools (font size, font name and block format) by modifying the tools' item
            collections, as well as how to create completely custom tools.
        </p>
    </div>

    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
            &lt;p&gt;&lt;img src=&quot;http://www.kendoui.com/Image/kendo-logo.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;
                Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
                In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
                accessibility standards and provides API for content manipulation.
            &lt;/p&gt;
            &lt;p&gt;Features include:&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
                &lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
                &lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
                &lt;li&gt;Cross-browser support&lt;/li&gt;
                &lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
                &lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;
                Read &lt;a href=&quot;http://docs.kendoui.com&quot;&gt;more details&lt;/a&gt; or send us your
                &lt;a href=&quot;http://www.kendoui.com/forums.aspx&quot;&gt;feedback&lt;/a&gt;!
            &lt;/p&gt;
    </textarea>

    <script type="text/x-kendo-template" id="viewHtml-template">
        <div>
            <textarea style="width: 400px; height: 300px;"></textarea>
            <div class="viewHtml-actions">
                <button class="k-button viewHtml-update">Update</button>
                <button class="k-button viewHtml-cancel">Cancel</button>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-template" id="backgroundColor-template">
        <label for='templateTool' style='vertical-align:middle;'>Background:</label>
        <select id='templateTool' style='width:90px'><option value=''>none</option><option value='\#ff9'>yellow</option><option value='\#dfd'>green</option></select>
    </script>

    <script>
        $("#editor").kendoEditor({
            tools: [
                {
                    name: "fontName",
                    items: [].concat(kendo.ui.Editor.prototype.options.fontName[8], [{ text: "Garamond", value: "Garamond, serif" }])
                },
                {
                    name: "fontSize",
                    items: [].concat(kendo.ui.Editor.prototype.options.fontSize[0], [{ text: "16px", value: "16px" }])
                },
                {
                    name: "formatBlock",
                    items: [].concat(kendo.ui.Editor.prototype.options.formatBlock[0], [{ text: "Fieldset", value: "fieldset" }])
                },
                {
                    name: "customTemplate",
                    template: $("#backgroundColor-template").html()
                },
                {
                    name: "viewHtml",
                    tooltip: "View HTML",
                    exec: function(e) {
                        var editor = $(this).data("kendoEditor");

                        var dialog = $($("#viewHtml-template").html())
                            .find("textarea").val(editor.value()).end()
                            .find(".viewHtml-update")
                                .click(function() {
                                    editor.value(dialog.element.find("textarea").val());
                                    dialog.close();
                                })
                            .end()
                            .find(".viewHtml-cancel")
                                .click(function() {
                                    dialog.close();
                                })
                            .end()
                            .kendoWindow({
                                modal: true,
                                title: "View HTML",
                                deactivate: function() {
                                    dialog.destroy();
                                }
                            }).data("kendoWindow");

                        dialog.center().open();
                    }
                },
                {
                    name: "custom",
                    tooltip: "Insert a horizontal rule",
                    exec: function(e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<hr />" });
                    }
                }
            ]
        });

        $("#templateTool").kendoDropDownList({
            change: function(e) {
                $("#editor").data("kendoEditor").body.style.backgroundColor = e.sender.value();
            }
        });

    </script>

    <style scoped>
        .k-viewHtml {
            background: transparent url(../../content/web/editor/insert-html-icon.png) no-repeat 50% 50%;
        }
    </style>
</div>

</body>
</html>
